<template>
  <div class="container">
    <el-dialog
      :visible="showTagsDialog"
      :title="`${title}目录`"
      width="400px"
      @close="closeFn"
    >
      <el-form
        label-width="80px"
        :model="tagsAddForm"
        :rules="rules"
        ref="tagsFormRef"
      >
        <el-form-item label="所属学科" v-if="!subId">
          <el-select v-model="tagsAddForm.subjectID" class="selectStyle">
            <el-option
              v-for="obj in subList"
              :key="obj.value"
              :label="obj.label"
              :value="obj.value"
              placeholder="请选择"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            v-model="tagsAddForm.tagName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button @click="closeFn">取消</el-button>
          <el-button type="primary" @click="btnOk">确认</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/tags.js'
import { simpleSub } from '@/api/hmmm/subjects.js'
export default {
  name: 'TagsAdd',
  props: {
    showTagsDialog: {
      type: Boolean
    },
    title: {
      type: String
    },
    id: {
      type: Number,
      default: null
    },
    subId: {
      type: String
    }
  },
  watch: {
    showTagsDialog: {
      async handler () {
        if (this.showTagsDialog && this.id) {
          const { data } = await detail({ id: this.id })
          console.log(data)
          this.tagsAddForm = {
            subjectID: data.subjectID,
            tagName: data.tagName
          }
        }
      }
    }
  },
  data () {
    return {
      tagsAddForm: {
        subjectID: null,
        tagName: ''
      },
      rules: {
        tagName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
        ]
      },
      subList: [] // 学科列表
    }
  },
  created () {
    this.getSubList()
  },
  methods: {
    // 获取学科列表数据
    async getSubList () {
      const { data } = await simpleSub()
      // console.log(data)
      this.subList = data
    },
    // 关闭弹层
    closeFn () {
      this.$emit('update:showTagsDialog', false)
      this.tagsAddForm = {
        subjectID: null,
        tagName: ''
      }
      // 重置表单 移除校验结果
      this.$refs.tagsFormRef.resetFields()
    },
    // 确认按钮
    async btnOk () {
      // 表单验证
      await this.$refs.tagsFormRef.validate()
      if (this.subId) {
        this.tagsAddForm.subjectID = this.subId * 1
      }
      if (this.id) {
        // 修改
        const res = await update({ id: this.id, ...this.tagsAddForm })
        console.log(res)
        this.$message.success('修改标签成功')
      } else {
        // 新增
        const res = await add({ id: this.id, ...this.tagsAddForm })
        console.log(res)
        this.$message.success('新增标签成功')
      }
      this.closeFn()
      this.$emit('getTagsList')
    }
    // 修改标签时数据回显
    // async getTagsAddForm () {
    //   console.log(this.id)
    //   const { data } = await detail({ id: this.id })
    //   console.log(data)
    //   this.tagsAddForm = {
    //     subjectID: data.subjectID,
    //     tagName: data.tagName
    //   }
    // }
  }
}
</script>

<style scoped lang="less">
.selectStyle {
  width: 280px;
}
</style>
